<script setup lang="jsx">
import CommonList from "@/components/CommonList.vue";
import CommonDialog from "@/components/CommonDialog.vue";
import { useCommonQuery } from "@/composables/useCommonQuery.js";
import { getRobotList } from "@/api/common/archives.js";
import {
  eightQuadrupedCruise,
  mongoEightQuadruped,
} from "@/api/quadruped/cruise";
import { ref } from "vue";
import { ElMessageBox, ElNotification } from "element-plus";
import {
  motionControlFormOptions,
  defaultMotionControlFormData,
  robotStatusOptions,
} from "@/views/quadruped/utils/EightQuadrupedControl.jsx";

const queryOptions = {
  queryApi: getRobotList,
  newParams: {
    RType: "eightQuadruped",
  },
};

const { loading, list, total, params, handleQuery } =
  useCommonQuery(queryOptions);
handleQuery();

const columns = [
  { label: "编号", prop: "id", width: 80 },
  { label: "机器人名称", prop: "name" },
  { label: "编码", prop: "code" },
  { label: "状态", prop: "status" },
  {
    label: "操作",
    prop: "action",
    customRender(row) {
      return (
        <div>
          <el-button
            text
            bg
            type="primary"
            size="small"
            onClick={() => {
              showRobotStatus(row.code);
              robotStatusVisible.value = true;
            }}
          >
            查看状态
          </el-button>
          <el-button
            text
            bg
            type="primary"
            size="small"
            onClick={() => {
              formData.value = {
                code: row.code,
                ...defaultMotionControlFormData,
              };
              visible.value = true;
            }}
          >
            运动控制
          </el-button>
        </div>
      );
    },
  },
];

const visible = ref(false);
const formData = ref({});

// 发起运动控制
async function launchMotionControl(params) {
  await ElMessageBox.confirm("确认继续操作吗", "警告");
  const { message = "" } = await eightQuadrupedCruise(params);
  ElNotification({ type: "success", message });
  visible.value = false;
}

let timer;
const robotStatusVisible = ref(false);
const robotStatusData = ref({});
async function showRobotStatus(code) {
  clearTimeout(timer);
  const { data = {} } = await mongoEightQuadruped({ code });
  robotStatusData.value = data;
  timer = setTimeout(() => {
    showRobotStatus(code);
  }, 3000);
}
function closeRobotStatus() {
  clearTimeout(timer);
}
</script>
<template>
  <div class="h-main w-full p-4">
    <CommonList
      :loading="loading"
      :list="list"
      :total="total"
      :params="params"
      :columns="columns"
      @handle-query="handleQuery"
    ></CommonList>
    <CommonDialog
      v-model:visible="visible"
      v-model:form-data="formData"
      title="运动控制"
      :options="motionControlFormOptions"
      @confirm="launchMotionControl"
    ></CommonDialog>
    <el-dialog
      v-model="robotStatusVisible"
      title="机器人状态"
      @close="closeRobotStatus"
    >
      <el-descriptions border :column="2">
        <el-descriptions-item
          v-for="item in robotStatusOptions"
          :key="item.prop"
          :label="item.name"
          align="center"
        >
          {{ robotStatusData[item.prop] }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
